<template>
  <div>
    <el-radio-group
      v-model="isCollapse"
      class="toggleTypography"
      router
      :style="unfold"
    >
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true" :style="packUp">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo menu"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      router
      :unique-opened="opened"
    >
      <el-submenu
        :index="right1.menuCode"
        v-for="right1 in firstMenu"
        :key="right1.menuCode"
        class="menuChild"
      >
        <template slot="title">
          <div :style="menuText">
            <i :class="right1.menuIcon"></i>
            <span slot="title"> {{ right1.menuText }} </span>
          </div>
        </template>
        <el-menu-item
          :index="right2.menuUrl"
          v-for="right2 in secondMenu(right1)"
          :key="right2.menuCode"
          @click="clickMenu(right2)"
          class="right2"
        >
          <div :style="child">
            {{ right2.menuText }}
          </div>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      opened: true,
      child: { borderLeft: "rgb(195 195 195) 1px solid" },
      menuText: { textAlign: "left", marginLeft: "10px" },
      packUp: { display: "inline-block" },
      unfold: {}
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(val) {
      this.$store.commit("pushtags", val);
      this.$store.commit("updateMutations",val);
      // console.log(this.$router);
    }
  },
  computed: {
    firstMenu() {
      return this.$store.state.userStore.rights.filter(
        right => right.menuParentCode == "ROOT_MENU"
      );
    },
    secondMenu() {
      return function(right1) {
        return this.$store.state.userStore.rights.filter(
          right => right.menuParentCode == right1.menuCode
        );
      };
    }
  },
  watch: {
    isCollapse: {
      //初始化时让handler调用
      immediate: true,
      //当isCollapse被修改时，handler被调用
      handler(val) {
        // debugger
        console.log(val);
        //收起状态
        if (val) {
          this.child.borderLeft = "rgb(195 195 195) 0px solid";
          this.menuText.marginLeft = "0px";
          this.packUp.display = "none";
          this.unfold.left = "7px";
        } else {
          this.child.borderLeft = "rgb(195 195 195) 1px solid";
          this.menuText.marginLeft = "10px";
          this.packUp.display = "inline-block";
          this.unfold.left = "25px";
        }
      }
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.toggleTypography {
  position: absolute;
  left: 25px;
  top: 65px;
  transition: left 0.3s;
}
.menu {
  top: 50px;
  background-color: #e9eef3;
  border-right-width: 0px;
}
.menuChild {
  background-color: #fff;
}
.right2 {
  font-size: 13px;
}
.right2 {
  text-align: center;
}
</style>
